#warp{
    width: 100%;
    height: 100%;
    font-size: 1.5rem;
    color:#333333;
    // display: none;
}
#fixed{
    position: fixed;
    top:0;
    left: 0;
}
#header{
    width: 100%;
    height: 4.2rem;
    background-color: #36d9d6;
    padding-top: 2rem;
    .header-search{
        width: 100%;
        img{
            width: 1.5rem;
        }
        a{
            display: inline-block;
            width: 20%;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        input{
            width:70%;
            height: 3rem;
            border-radius: 2rem;
            outline: none;
            background-image: url('../image/sous.png');
            background-position-x: 1.3rem;
            background-size: 2rem;
            background-repeat: no-repeat;
            background-position-y:0.5rem;
            text-indent: 3.75rem;
            background-color: #36d9d6;
            border:0.2rem solid white;
            color:white;
        }
        input::-webkit-input-placeholder{
            color:white;
            font-size: 1.2rem;
            }
    }
}

#slideshow{
    padding: 0 0.1rem;
    height: 18.4rem;
    background-color:#36d9d6;
    overflow: hidden;
    ul{
        transition: 0.5s;
    }
    li{
        float: left;
    }
    img{
        width: 100%;
        height: 18.4rem;
    }
}
#part-time{
    width: 100%;
    height: 9.8rem;
    color:#666666;
    ul{
        margin-top:2rem;
        display: flex;
        justify-content:space-around;
        li{
            width:6rem;
            line-height: 3rem;
            text-align: center;
        }
    }
    img{
        width: 100%;
    }
}
#work{
    width: 100%;
    height: 13rem;
    padding: 1rem 0 0 0;
    background-color: #f5f5f5;
    color:#666666;
    ul{
        display: flex;
        background-color: #f5f5f5;
        li{
            width: 23rem;
            text-align: center;
            font-size: 1.5rem;
            height: 12.2rem;
            margin-right: 1.15rem;
            background-color: white;
            p{
                font-size: 1.2rem;
                margin:0 0.5rem;
            }
            .lq{
                line-height: 4rem;
                text-align: center;
            }
            .lp{
                line-height: 2rem;
                p:nth-of-type(1){
                    text-align: left;
                }
                p:nth-of-type(2){
                    text-align: right;
                }
            }
            span{
                font-size: 1.6rem;
            }
        }
        li:nth-of-type(1){
            span{
                color:#36d9d6;
            }
            img{
                width: 5.46rem;
            }
        }
        li:nth-of-type(2){
            span{
                color:#cc3333;
            }
            img{
                width: 7.5rem;
            }
        }
        li:nth-of-type(3){
            margin:0;
            span{
                color:#e6d065;
            }
            img{
                width: 4.6rem;
            }
        }
    }
}
#advertising{
    height: 10rem;
    padding:0 1rem;
    padding-bottom: 1.1rem;
    background-color: #f5f5f5;
    .center{
        width: 100%;
        height: 10rem;
        background: white;
    }
    .advertising-img{
        margin-left: 1.1rem;
        float: left;
        background-color: white;
        width: 55%;
        height: 8.8rem;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .advertising-font{
        float: left;
        text-align: center;
        margin-top: 1rem;
        margin-left: 1rem;
        line-height: 4rem;
        color:#666666;
        background-color: white;
    }
}
#recommend{
    width: 100%;
    height: 3.7rem;
    // margin-top: 1rem;
    text-indent: 1.15rem;
    line-height: 3.7rem;
    color:#666666;
    background-color: #f5f5f5;
    padding-bottom: 0.6rem;
    p{
        background-color: white;
    }
}
#work-list{
    li{
        height: 7rem;
        margin:0 1.1rem 0 1.7rem;
        display: flex;
        align-items:center;
        border-bottom: 2px solid #f5f5f5;
        // width: calc(100%-50rem);
        .logo{
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            background-color: #ff4040;
            color:white;
            line-height: 4rem;
            text-align: center;
            float: left;
            margin-right: 1rem;
        }
        .bk1{
            background-color:#ff9f40; 
        }
        .bk2{
            background-color:#23c7e8;
        }
        .bk3{
            background-color: #23C7E8;
        }
        .bk4{
            background-color: #FF4040;
        }
        .bk5{
            background-color: #FF408C;
        }
        .center{
            float: left;
            width: calc(100%-50rem);
            .color{
                color:#36d9d6;
            }
        }
        .right{
            width: 10rem;
            float: right;
            text-align: right;
            .small{
                display: inline-block;
                background-color: #ffdd00;
                border-radius: 0.5rem;
                color:white;
                line-height: 2rem;
                padding:0 1rem;
            }
            p{  
                width: 90%;
                margin-top: 1rem;
                text-align: right;
                color:#666666;
            }
        }
    }
}
#bottom{
    position: fixed;
    width: 100%;
    height: 7rem;
    bottom:0;
    background-color: white;
    ul{
        margin-top:1rem;
        display: flex;
        justify-content:space-around;
        li{
            width: 3rem;
            height: 7rem;
            text-align: center;
            img{
                width: 100%;
            }
        }
    }
}

//位置选择
#location{
    position: absolute;
    width: 100%;
    top:0;
    left:0;
    display: none;
    img{
        width: 3rem;
    }
    .logo{
        width: 100%;
        height: 6rem;
        background-color: #36d9d6;
        text-align: center;
        position: fixed;
        top:0;
        left:0;
        z-index: 100;
        a{
            font-size: 3.5rem;
            color:white;
            float: left;
            margin-top: 0.5rem;
        }
        span{
            display: inline-block;
            line-height: 7rem;
            font-size: 2rem;
            color:white;
            
        }
    }
    .location-search{
        position: fixed;
        width: 100%;
        height: 8.6rem;
        background-color: #f5f5f5;
        top:6rem;
        z-index: 10;
        input{
            width: 80%;
            height: 3.5rem;
            margin:1.1rem;
            margin-bottom: 0.5rem;
            border-radius: 1rem;
            outline: none;
            background-image: url('../image/sous.png');
            background-position-x: 3.3rem;
            background-size: 2rem;
            background-repeat: no-repeat;
            background-position-y:0.7rem;
            text-indent: 5.75rem;
        }
        p{
            font-size: 1.8rem;
            margin-left:1.15rem;
        }
    }
    #city{
        width: 100%;
        position: absolute;
        top:14.6rem;
        li{
            height:5.7rem;
            background-color: white;
            font-size: 2rem;
            line-height: 5.7rem;
            padding-left:1.15rem;
            border-bottom: 0.2rem solid #f5f5f5;            
        }
        .special{
            background-color: #f5f5f5;
            height: 3.5rem;
            line-height: 3.5rem;
            a{
                 color:#333333;

            }
        }
    }
    #initial{
        position: fixed;
        z-index: 100;
        top:12rem;
        right: 1rem;
        font-size: 1.5rem;
        li{
            width:4rem;
            text-align: center;
        }
    }
}